<template>
	<view class="download">
		<image src="../../static/img/logo.png" mode="" class="logo"></image>
		<text class="txt">艾瑞测HIV电子检测</text>
		<view class="btn" @click="load">下载安卓APP</view>

		<view class="progress-container" v-if="isShowProgress">
			<view class="progress-box">
				<view class="text">文件下载中，请稍后......</view>
				<progress :percent="progress" show-info stroke-width="3" />
			</view>
		</view>

	</view>


</template>

<script>
	export default {
		data() {
			return {
				isShowProgress: false,
				progress: 0
			}
		},
		methods: {
			load() {
				this.isShowProgress = true
				const downloadTask = uni.downloadFile({
					url: 'https://www.shlxkj.info/airuice.apk',
					// url: 'http://101.91.221.35:8080/ArcHIV/fileenclosure/download?id=1', //仅为示例，并非真实的资源
					success: (data) => {
						if (data.statusCode === 200) {
							console.log('下载成功',data);
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 3000)
								}
							});
						}
					},
					fail: (err) => {
						if (err.status === 500) {
							console.log(err);
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '失败请重新下载',
							});
						}
					}
				});
				console.log(downloadTask);
				downloadTask.onProgressUpdate((res) => {
					
					console.log(res);
					let that = this
					that.progress = res.progress
					if(res.progress==100){
						that.isShowProgress = false
					}
				
					// console.log('下载进度' + res.progress);
					// console.log('已经下载的数据长度' + res.totalBytesWritten);
					// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.download {
		position: relative;

		.logo {
			width: 600rpx;
			height: 500rpx;
			position: absolute;
			left: calc(50% - 300rpx);
			// left: 50%;
			top: 200rpx;
			// transform: translate(-50%, -50%);
		}

		.txt {
			position: absolute;
			left: 50%;
			top: 600rpx;
			transform: translate(-50%, 0);
			font-weight: 600;
			font-size: 40rpx;
			color: #333333;
		}

		.btn {
			color: #fff;
			position: absolute;
			width: 400rpx;
			height: 100rpx;
			background: #1E64E1;
			border-radius: 20rpx;
			font-size: 40rpx;
			left: calc(50% - 200rpx);
			top: 800rpx;
			text-align: center;
			line-height: 100rpx;
			cursor: pointer;
		}

		.progress-container {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: rgba(0, 0, 0, .2);
			width: 750rpx;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;

			.progress-box {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx;

				.text {
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>
